<template>
  <div class="header">
    <el-row>
      <el-menu
      router
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <!-- LOGO部分 -->
        <div id="Logo">
          <img src="../../assets/img/Logo.png">
        </div>
      <!-- 文字部分 -->
        <div class="hidden-sm-and-down" id="Font">
          <div class="systemName">
            点 名 系 统 Dev
          </div>
        </div>
      <!-- 选项部分 -->
        <el-submenu index="1">
        <template slot="title">更多设置</template>
        <el-menu-item index="luckdraw">开始点名</el-menu-item>
        <el-menu-item index="setting">点名设置</el-menu-item>
        <el-menu-item @click="LoginOut">退出登录</el-menu-item>
      </el-submenu>
    </el-menu>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "Header",
  methods: {
    LoginOut(){
      // 清除所有数据
      window.localStorage.clear();
      this.$router.push("/login");
    }
  },
};
</script>
<style lang="less" scoped>
.header {
  padding: 0px 10px;
  min-width: 350px;
  width: 100%;
  height: 3.75rem;
  background-color: #545C64;
  /deep/.el-menu-demo li{
    float: right;
  }
  /deep/.el-menu-demo{
    border-bottom: none;
  }
}
#Logo{
  display: inline-block;
  // background-color: red;
  img{
    height: 60px;
    vertical-align: middle;
  }
}
#Font{
  display: inline-block;
  // background-color: rebeccapurple;
  .systemName{
    display: inline-block;
    height: 40px;
    vertical-align: middle;
    padding-left: 10px;
    line-height: 40px;
    border-left: 1px solid #F8F8FF;
    color: #F8F8FF;
    font-weight:bold;
  }
}
</style>